<template>
    <view style="width: 90%; margin: auto;">
        <!-- @scrolltolower 滚动触发事件 -->
        <scroll-view scroll-y="true" class="scroll-y" @scrolltolower="lower">
            <!-- 头部 -->
            <view class="spcz tobu">
                <p class="xinpintuijian">
                    新品推荐
                </p>
                <image :src="tobu" style="width: 100%;height: 400rpx;"></image>
            </view>
            <!-- 商品列表 -->
            <view style="padding-top: 30rpx; height: 100%;">
                <view class="x lie" v-for="item in from">
                    <!-- 商品列表图 -->
                    <image :src="item.picUrl" style="width: 200rpx;height: 200rpx;"></image>
                    <view class="y zxfx">
                        <!-- 商品名称 -->
                        <view class="">
                            <p>{{item.name}}</p>
                            <p>{{item.brief}}</p>
                        </view>
                        <!-- 商品价格 -->
                        <view class="x">
                            <p><!-- 现价 -->
                                <span style="font-size: 25rpx;">￥</span>
                                <span>{{item.retailPrice}}</span>
                            </p>
                            <!-- 原价 -->
                            <p style="color: #818181; padding-left: 15rpx; text-decoration: line-through;">
                                <span style="font-size: 20rpx;">￥</span>
                                <span style="font-size: 20rpx;">{{item.counterPrice}}</span>
                            </p>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                from: [],
                tobu: "http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png",
                page: 1, //默认当前页
            }
        },
        onLoad() {
            uni.request({
                url: 'http://47.91.230.137:8086/wx/goods/list?isNew=true' + '&page=' + this.page,
                success: (res) => {
                    console.log(res)
                    this.from = res.data.data.list
                }
            })
        },
        methods: {
            // 滚动事件方法
            lower() {
                // console.log("到底了")
                this.page = this.page + 1
                uni.request({
                    url: 'http://47.91.230.137:8086/wx/goods/list?isNew=true' + '&page=' + this.page,
                    success: (res) => {
                        // concat()方法用于链接两个数组，不会改变现有的数组，返回一个新的数组
                        var arr1 = this.from;
                        var arr2 = res.data.data.list;
                        var arr3 = arr1.concat(arr2);
                        this.from = arr3
                    }
                })
            }
        }
    }
</script>

<style>
    html {
        background: #f1f1f1;
    }

    .lie {
        margin-top: 10rpx;
        background: #ffffff;
    }

    .tobu {
        padding-top: 30rpx;
        position: relative;
    }

    .xinpintuijian {
        position: absolute;
        font-size: 100rpx;
        color: #ffffff;
    }
</style>